<template>
  <div class="expert-user-container">
    <!-- 专家选择区域 -->
    <div class="expert-selector-section">
      <div class="selector-header">
        <h3>选择专家</h3>
        <el-button type="primary" @click="showExpertSelector">选择专家</el-button>
      </div>

      <!-- 已选专家信息 -->
      <div v-if="selectedExpert" class="selected-expert-info">
        <div class="expert-card">
          <el-image
            style="width: 80px; height: 80px; border-radius: 50%;"
            :src="selectedExpert.avatar"
            fit="cover"
          />
          <div class="expert-details">
            <h4>{{ selectedExpert.nickname }}</h4>
            <p class="expert-desc">{{ selectedExpert.desc || '暂无简介' }}</p>
            <p class="expert-fans">粉丝数: {{ selectedExpert.fans || 0 }}</p>
          </div>
          <el-button type="text" @click="clearExpert">清除选择</el-button>
        </div>
      </div>

      <div v-else class="no-expert-tip">
        <el-alert
          title="请先选择专家"
          type="info"
          :closable="false"
          show-icon
        />
      </div>
    </div>

    <!-- 用户列表区域 -->
    <div v-if="selectedExpert" class="user-list-section">
      <div class="list-header">
        <h3>关注该专家的用户列表</h3>
        <div class="search-box">
          <el-select v-model="live" placeholder="请选择关注来源" @change="handleLiveChange">
            <el-option label="直播间关注" :value="1" />
            <el-option label="正常关注" :value="0" />
          </el-select>
          <el-input
            v-model="searchQuery"
            placeholder="请输入手机号或昵称搜索"
            style="width: 300px"
            clearable
            @clear="handleSearch"
            @input="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
          </el-input>
        </div>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="id" label="ID" align="center" width="80" />
        <el-table-column prop="mobile" label="手机号" align="center" width="150" />
        <el-table-column prop="nickname" label="昵称" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column prop="live" label="关注来源" align="center" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.live === 1 || scope.row.live === '1'" style="color:red">直播间关注</span>
            <span v-else-if="scope.row.live === 0 || scope.row.live === '0'" style="color:green">正常关注</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="score" label="账号余额" align="center" width="120" /> -->
        <el-table-column prop="create_time" label="关注时间" align="center" width="180" />
        <!-- <el-table-column prop="follow_time" label="关注时间" align="center" width="180" /> -->
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div
              style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:100px;"
            >
              <el-button
                size="small"
                type="danger"
                style="width: 100px;margin-bottom: 10px;"
                @click="handleButton1Click(scope.row.mobile)"
              >赠送球钻</el-button>
              <el-button
                size="small"
                type="primary"
                style="width: 100px;margin-left: 0 !important;"
                @click="notesClick(scope.row.mobile)"
              >设置备注</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="tabListPage">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 专家选择器对话框 -->
    <ExpertSelector
      :visible.sync="expertSelectorVisible"
      @select="handleExpertSelect"
    />

    <!-- 赠送球钻对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span style="margin-bottom: 30px;display: inline-block;">为 {{ userPhone }} 充值球钻</span>
      <el-input v-model="money" placeholder="请输入球钻数量" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 设置备注对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisibleNotes" width="30%" :before-close="handleCloseNotes">
      <span style="margin-bottom: 30px;display: inline-block;">为 {{ userPhoneNotes }} 添加备注</span>
      <el-input v-model="notes" placeholder="请输入备注" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellationNotes">取 消</el-button>
        <el-button type="primary" @click="determineNotes">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { expertFansList, sendUserMoney, giveUsernotes } from '../../../libs/api'
import ExpertSelector from '@/components/ExpertSelector'

export default {
  name: 'ExpertUser',
  components: {
    ExpertSelector
  },
  data() {
    return {
      selectedExpert: null,
      expertSelectorVisible: false,
      tableData: [],
      loading: false,
      searchQuery: '',
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      pageSizes: [10, 20, 30, 50],
      live: 0,
      dialogVisible: false,
      dialogVisibleNotes: false,
      userPhone: '',
      userPhoneNotes: '',
      money: '',
      notes: ''
    }
  },
  methods: {
    handleLiveChange(val) {
      this.live = val
      this.currentPage = 1
      this.getUserList()
    },
    // 显示专家选择器
    showExpertSelector() {
      this.expertSelectorVisible = true
    },
    // 处理专家选择
    handleExpertSelect(expert) {
      this.selectedExpert = expert
      this.currentPage = 1
      this.searchQuery = ''
      this.getUserList()
    },
    // 清除选择的专家
    clearExpert() {
      this.selectedExpert = null
      this.tableData = []
      this.totalCount = 0
    },
    // 获取用户列表
    getUserList() {
      if (!this.selectedExpert) {
        return
      }
      this.loading = true
      expertFansList({
        expert_id: this.selectedExpert.id,
        page: this.currentPage,
        limit: this.pageSize,
        search: this.searchQuery,
        live: this.live
      }).then(res => {
        this.loading = false
        console.log(res)
        if (res && res.data) {
          this.tableData = res.data.data || []
          this.totalCount = res.data.total || 0
        }
      }).catch(err => {
        this.loading = false
        this.$message.error('获取用户列表失败')
        console.error(err)
      })
    },
    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.getUserList()
    },
    // 分页 - 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.getUserList()
    },
    // 分页 - 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getUserList()
    },
    // 赠送球钻 - 打开对话框
    handleButton1Click(mobile) {
      this.userPhone = mobile
      this.dialogVisible = true
      this.money = ''
    },
    // 设置备注 - 打开对话框
    notesClick(mobile) {
      this.userPhoneNotes = mobile
      this.dialogVisibleNotes = true
      this.notes = ''
    },
    // 取消赠送球钻
    cancellation() {
      this.dialogVisible = false
      this.money = ''
    },
    // 取消设置备注
    cancellationNotes() {
      this.dialogVisibleNotes = false
      this.notes = ''
    },
    // 确定赠送球钻
    determine() {
      if (this.money === '') {
        this.$message({
          type: 'error',
          message: '填写数量不能为空!'
        })
        return
      }
      this.dialogVisible = false
      sendUserMoney({
        mobile: this.userPhone,
        score: this.money
      }).then(res => {
        this.$message({
          type: 'success',
          message: '赠送成功!'
        })
        this.getUserList()
        this.money = ''
      }).catch(err => {
        this.$message.error('赠送失败')
        console.error(err)
      })
    },
    // 确定设置备注
    determineNotes() {
      if (this.notes === '') {
        this.$message({
          type: 'error',
          message: '备注不能为空!'
        })
        return
      }
      this.dialogVisibleNotes = false
      giveUsernotes({
        mobile: this.userPhoneNotes,
        remark: this.notes
      }).then(res => {
        this.$message({
          type: 'success',
          message: '设置备注成功!'
        })
        this.getUserList()
        this.notes = ''
      }).catch(err => {
        this.$message.error('设置备注失败')
        console.error(err)
      })
    },
    // 关闭赠送球钻对话框
    handleClose() {
      this.dialogVisible = false
      this.money = ''
    },
    // 关闭设置备注对话框
    handleCloseNotes() {
      this.dialogVisibleNotes = false
      this.notes = ''
    }
  }
}
</script>

<style scoped>
.expert-user-container {
  padding: 20px;
}

.expert-selector-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.selector-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.selected-expert-info {
  margin-top: 20px;
}

.expert-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  gap: 20px;
}

.expert-details {
  flex: 1;
}

.expert-details h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 500;
}

.expert-desc {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

.expert-fans {
  margin: 5px 0 0 0;
  color: #909399;
  font-size: 12px;
}

.no-expert-tip {
  margin-top: 20px;
}

.user-list-section {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.list-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabListPage {
  margin-top: 20px;
  text-align: right;
}
</style>

